<template>
	<view class="wx-home">
		<view class="wx-bgc">
			<image src="@/static/image/home-wxbgc.png" mode=""></image>
		</view>
		<view class="wx-position" :style="{paddingTop:props.tabHeight+'px'}">
			<!-- #ifdef MP-WEIXIN -->
			<view class="">
				<up-navbar title="" titleStyle="color:#171717" leftIcon="" :autoBack="false" placeholder bgColor="transparent">
				</up-navbar>
			</view>
			<!-- #endif -->
			<view class="menu-box">
				<view class="menu-header-top">
					<view class="header-img">
						<image src="@/static/image/home-header-title1.png" mode="heightFix"></image>
					</view>
					<view class="header-img">
						<image src="@/static/image/home-header-title2.png" mode="heightFix"></image>
					</view>
				</view>

				<view class="menu-category-box">
					<view class="category-absolute">
						<image src="@/static/image/home-category-bgc.png" mode=""></image>
					</view>
					<view class="menu-list">
						<view class="menu-item" v-for="(item,index) in menuList" :key="index">
							<image :src="item.url" mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>

				<view class="menu-men-info">
					<view class="men-absolute">
						<image src="@/static/image/home-md-info.png" mode=""></image>
					</view>
					<view class="menu-info-box">
						<view class="menu-info-address">
							<view class="m-i-a">
								<image src="@/static/image/home-address-icon.png" mode=""></image>
								<text>{{storeData.st_name}}</text>
							</view>
							<view class="m-i-t">{{storeData.st_address}}</view>
						</view>
						<view class="menu-info-tel">
							<image src="@/static/image/home-address-icon.png" mode=""></image>
							<text>{{storeData.st_tel}}</text>
						</view>
					</view>
				</view>

				<view class="menu-weight-box">
					<view class="weight-absolute">
						<image src="@/static/image/home-weight-bgc.png" mode=""></image>
					</view>
					<view class="weight-info">
						<view class="weight-title">预估重量</view>
						<view class="weight-input">
							<up-input placeholder="请输入预估重量" border="none" type="digit" v-model="weightValue"></up-input>
							<text>kg</text>
						</view>
					</view>
				</view>
				<view class="menu-btn-box" @click="submit">
					<image src="@/static/image/home-submit.png" mode=""></image>
				</view>
			</view>
		</view>
		<authon-common :popupShow="popupShow" @authonClick="authonClick"></authon-common>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getStoreDetails,
		getCreateOrder
	} from '@/api/http.js'
	// 接收父组件传值
	const props = defineProps({
		// tabbar高度
		tabHeight: {
			type: Number,
			default: 0,
		}
	})
	const menuList = ref([{
			name: '四季衣服',
			url: '../../static/image/category1.png'
		},
		{
			name: '各类鞋子',
			url: '../../static/image/category2.png'
		},
		{
			name: '帽子围巾',
			url: '../../static/image/category3.png'
		},
		{
			name: '床单被罩',
			url: '../../static/image/category4.png'
		},
		{
			name: '闲置旧包',
			url: '../../static/image/category5.png'
		},
		{
			name: '毛绒玩具',
			url: '../../static/image/category6.png'
		}
	])
	// 填写重量
	const weightValue = ref('')
	// 信息
	const storeData = ref({})
	onMounted(() => {
		if (!storeId.value) {
			uni.showToast({
				title: '请扫码获取门店信息',
				icon: 'none'
			})
			return
		}
		getStoreData()
	})
	// 扫码进入后调用接口
	const storeId = ref('')
	const city = ref('')
	storeId.value = uni.getStorageSync('store_id')
	city.value = uni.getStorageSync('city')
	const getStoreData = async () => {
		const res = await getStoreDetails({
			store_id: storeId.value,
			city: city.value
		})
		if (res.code != 200) {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			return
		}
		storeData.value = res.data
	}
	// 点击立即提交
	const popupShow = ref(false)
	const submit = async () => {
		if (!storeId.value) {
			uni.showToast({
				title: '请扫码获取门店信息',
				icon: 'none'
			})
			return
		}
		if (!weightValue.value) {
			uni.showToast({
				title: '请输入预估重量',
				icon: 'none'
			})
			return
		}
		if(weightValue.value>=30){
			uni.showToast({
				title: '单笔预估重量最大30公斤！',
				icon: 'none'
			})
			return
		}
		if(!uni.getStorageSync('token')){
			uni.showToast({
				title:'请先授权',
				icon:'none'
			})
			popupShow.value = true
			return
		}
		let params = {
			...storeData.value,
			weight: weightValue.value
		}
		const res = await getCreateOrder(params)
		if (res.code != 200) {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			return
		}
		uni.showToast({
			title: res.message,
			icon: 'none'
		})
		weightValue.value = ''
	}
	const authonClick = ()=>{
		popupShow.value = false
	}
</script>

<style lang="scss" scoped>
	.wx-home {
		position: relative;
		background-color: #f7f7f7;
		box-sizing: border-box;

		.wx-bgc {
			position: absolute;
			width: 100%;
			height: 100vh;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wx-position {
			position: absolute;
			width: 100%;
			z-index: 999;
		}

		.menu-box {
			padding: 0 32rpx;

			.menu-header-top {
				padding-left: 12rpx;

				.header-img {
					image {
						height: 40rpx;
					}

					&:last-child {
						margin-top: 32rpx;
					}
				}
			}

			.menu-category-box {
				position: relative;
				height: 474rpx;
				margin-top: 30rpx;

				.category-absolute {
					position: absolute;
					width: 686rpx;
					height: 474rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.menu-list {
					position: absolute;
					width: 686rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 100rpx 84rpx 0;
					box-sizing: border-box;

					.menu-item {
						width: 112rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 34rpx;
						margin-right: 90rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						image {
							width: 80rpx;
							height: 80rpx;
						}

						text {
							margin-top: 30rpx;
							font-size: 28rpx;
							color: #4B5563;
						}
					}
				}
			}

			.menu-men-info {
				position: relative;
				height: 294rpx;
				margin-top: 22rpx;
				box-sizing: border-box;

				.men-absolute {
					position: absolute;
					width: 686rpx;
					height: 294rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.menu-info-box {
					position: absolute;
					width: 686rpx;
					padding: 100rpx 30rpx 30rpx;
					box-sizing: border-box;

					.menu-info-address {
						.m-i-a {
							display: flex;
							align-items: center;

							text {
								margin-left: 20rpx;
								font-size: 28rpx;
								color: #1F2937;
								margin-top: 8rpx;
							}
						}

						.m-i-t {
							font-size: 28rpx;
							color: #4B5563;
							padding-left: 60rpx;
						}
					}

					.menu-info-tel {
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						text {
							margin-left: 20rpx;
							font-size: 28rpx;
							color: #4B5563;
						}
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.menu-weight-box {
				position: relative;
				height: 214rpx;
				margin-top: 24rpx;

				.weight-absolute {
					position: absolute;
					height: 214rpx;
					width: 686rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.weight-info {
					position: absolute;
					height: 214rpx;
					padding: 32rpx;
					box-sizing: border-box;

					.weight-title {
						font-weight: 700;
						font-size: 28rpx;
						color: #1F2937;
					}

					.weight-input {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 622rpx;
						height: 76rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						border: 2rpx solid #4AAA00;
						padding: 0 18rpx;
						box-sizing: border-box;
						margin-top: 32rpx;

						text {
							font-size: 28rpx;
							color: #9CA3AF;
						}
					}
				}
			}

			.menu-btn-box {
				margin-top: 10rpx;

				image {
					width: 686rpx;
					height: 90rpx;
				}
			}
		}
	}
</style>